<template>
  <view class="flex-col page">
    <view class="mt-32 flex-row items-center section">
      <image
        class="image_2"
        src="../../static/wx/723adf8c076645e05605298d0f1f6b24.png"
      />
      <view class="flex-col items-start flex-1 ml-13">
        <text class="text_2">迪斯尼兔毛钥匙扣</text>
        <text class="mt-18 text_3">￥68.6</text>
      </view>
    </view>
    <view class="mt-32 flex-col group_2">
      <u-rate
        active-color="#FF841B"
        inactive-color="#E6E9F1"
        gutter="32"
        size="60"
      ></u-rate>

      <text class="self-center text_4 mt-21">4.5/5</text>
    </view>
    <view class="mt-32 flex-col">
      <text class="self-start text_5">评论</text>
      <view class="mt-20 flex-col self-stretch">
        <view class="flex-col justify-start items-start text-wrapper">
          <textarea
            class="font text_box"
            maxlength="1000"
            placeholder="在这里留下您的评论"
          />
        </view>
        <view class="flex-col justify-start items-center text-wrapper_2 mt-25">
          <text class="font text_7">发送您的评论</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },

  methods: {},
};
</script>

<style scoped lang="css">
.ml-13 {
  margin-left: 26rpx;
}
.mt-21 {
  margin-top: 42rpx;
}
.mt-25 {
  margin-top: 50rpx;
}
.page {
  padding: 0 56rpx 338rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-bottom: 8rpx;
}
.image {
  width: 48rpx;
  height: 44rpx;
}
.pos {
  position: absolute;
  left: 1rpx;
  top: 50%;
  transform: translateY(-50%);
}
.text {
  color: #000000;
  font-size: 40rpx;
  font-family: Laila;
  font-weight: 700;
  line-height: 37.68rpx;
}
.section {
  padding: 40rpx 40rpx 46rpx;
  background-color: #f4f6fa;
  border-radius: 32rpx;
}
.image_2 {
  width: 108rpx;
  height: 108rpx;
}
.text_2 {
  color: #2d3142;
  font-size: 28rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 26.66rpx;
}
.text_3 {
  color: #2d3142;
  font-size: 24rpx;
  font-family: Mukta;
  line-height: 17.54rpx;
}
.group_2 {
  padding: 0 96rpx;
}
.equal-division {
  align-self: stretch;
}
.equal-division-item {
  width: 66rpx;
  height: 60rpx;
}
.equal-division-item_2 {
  overflow: hidden;
  width: 62rpx;
  height: 58rpx;
}
.text_4 {
  color: #2d3142;
  font-size: 48rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 41.24rpx;
}
.text_5 {
  color: #2d3142;
  font-size: 36rpx;
  font-family: Mukta;
  font-weight: 700;
  line-height: 33.92rpx;
}
.text-wrapper {
  padding: 28rpx 0 30rpx;
  border-radius: 24rpx;
  border-left: solid 2rpx #e6e9f1;
  border-right: solid 2rpx #e6e9f1;
  border-top: solid 2rpx #e6e9f1;
  border-bottom: solid 2rpx #e6e9f1;
}
.font {
  font-size: 32rpx;
  font-family: Mukta;
  line-height: 30.34rpx;
}
.text_box {
  margin-left: 40rpx;
  color: #2d3142;
  height: 300rpx;
  line-height: 29.64rpx;
}
.text-wrapper_2 {
  padding: 40rpx 0 44rpx;
  background-color: #3a7beb;
  border-radius: 32rpx;
  box-shadow: 0rpx 8rpx 30rpx #fd878733;
}
.text_7 {
  color: #ffffff;
  font-weight: 600;
}
</style>
